<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：首页页面
 *		作   者：Frank
 *		创建日期：2023/07/10
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/07/10			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="container">
		<ModalDialog v-if="isShowDlg" :data="dlgData"></ModalDialog>
		<view class="title">
		</view>
		
		<!-- 类目列表 -->
		<scroll-view scroll-x="true" class="cate-scroll" 
			:scroll-into-view="scrollViewId"
			scroll-with-animation="true"
			overflow-anchor="none"
			>
			<view :id="'scrollView' + index" class="cate-scroll-item" v-for="(item, index) in commodityStore.category" 
				:key="index"
				@tap="changeIdx(index)"
				:class="activeIdx === index ? 'cate-item-active' : ''">
				{{ item.name }}
			</view>
		</scroll-view>
		
		 <!-- 广播 -->
		<view class="broadcoast">
			<uni-notice-bar 
				class="broadcoast-text"
				scrollable 
				single 
				background-color="rgba(255,255,255,0)"
				:fontSize="12"
				:speed="10" 
				color="#2a1461"
				:text="mixedStore.brdData">
			</uni-notice-bar>

			<!-- <image src="../../static/img/fuli/pmd_bg.png" class="broadcoast-bg" mode=""></image> -->
		</view>
		
		<!--列表头 -->
		<view class="list-head" v-if="commodityStore.category.length > 0">
			<view class="list-head-left">
				<view class="list-head-left-name">{{ commodityStore.category[activeIdx].name}}</view>
				<view class="list-head-left-englishname">{{ commodityStore.category[activeIdx].english_name}}</view>
			</view>
			<view class="list-head-right">
				<view class="iconfont icon-jiantou_zuoyouqiehuan list-head-right-arrow  "></view>
				<view class="list-head-right-text">左右划动查看更多类目</view>
			</view>
		</view>
		
		<!-- 奖品列表 -->
		<swiper :current="activeIdx" @change="onSwiperChange" :style="'height:' + clientHeight + 'px;'">
			<swiper-item v-for="(v, i) in commodityStore.category" :key="i">
				<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'"
					v-show="commodityStore.commodity[i]">
					<template v-for="(item, index) in commodityStore.commodity[i]" :key="index">
						<CommodityItem :commodity="item" :cateId="i" :commodityIdx="index"></CommodityItem>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import ModalDialog from '../../components/common/ModalDialog'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { commodityStore } from '@/store/modules/commodityStore.js'
	import { userStore } from '@/store/modules/userStore.js'
	import { configStore } from '@/store/modules/configStore.js'
	import { mixedStore } from '@/store/modules/mixedStore.js'
	import CommodityItem from '../../components/CommodityItem.vue'
	
	export default {
		components:{
			CommodityItem,
			ModalDialog
		},
	
		data() {
			return {
				activeIdx:0,
				clientHeight:0,
				scrollViewId:'scrollView0',
				
				// 对话框
				isShowDlg:false,
				dlgData:{
					title:'',
					text:'',
					cbTap:()=>{}
				}
			}
		},
		
		computed:{
			...mapStores(commodityStore, userStore, configStore, mixedStore)
		},
		
		methods: {
			// 获取配置
			getConfig(){
				if(this.configStore.isInit) return;
				$http.request({
					url:'index/get_config'
				}).then( res => {
					this.configStore.config = res.data;	
					
					let noticeMsg = this.configStore.config.notice.msg;
					if(noticeMsg.length > 0){
						this.dlgData.title = '温馨提示';
						this.dlgData.text = noticeMsg
						this.dlgData.btnText = '好的'
						this.dlgData.cbTap = () => {
							this.isShowDlg = false;
						}
						this.isShowDlg = true;							
					}	
				}).catch( () => {
					uni.showToast({
						title:'获取配置失败',
						icon:'none'
					})
				});				
			},
			
			// 获取类目列表
			getCategaryList(){
				if(this.commodityStore.category.length > 0) return;
				
				$http.request({
					url:'index/get_categary_list'
				}).then( res => {
					this.commodityStore.category = res.data;
				}).catch( () => {
					uni.showToast({
						title:'请求类目列表失败',
						icon:'none'
					})
				});
			},
			
			// 获取当前页商品列表
			getCommodityList(){
				if(this.commodityStore.commodity[this.activeIdx]) return;
				
				$http.request({
					url:'index/get_commodity_list',
					data:{
						categary:this.activeIdx
					}
				}).then( res => {
					if(res.code === 0){
						// 把图片地址改改
						res.data.forEach( (item, index, self) => {
							item.main_img = utility.getWebPath(item.main_img);
							item.sub_img = utility.getWebPath(item.sub_img, '|');
						});
						
						this.commodityStore.commodity[this.activeIdx] = res.data;
					} else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}).catch( () => {
					uni.showToast({
						title:'请求商品列表失败',
						icon:'none'
					})
				})
			},
			// 获取广播列表
			getBrdList(){
				$http.request({
					url:'mixed/get_brd_list'
				}).then( res => {
					let data = res.data;
					this.mixedStore.setBrdData(data);
				}).catch( () => {
					uni.showToast({
						title:'获取广播列表失败',
						icon:'none'
					})
				});						
			},
			
			// 修改当前页
			changeIdx(index){
				if(this.activeIdx === index) return;
				
				this.activeIdx = index;
				this.scrollViewId = 'scrollView'+this.activeIdx;
				this.getCommodityList();
			},
			// SWIPER划动
			onSwiperChange(e){
				this.changeIdx(e.detail.current);
			},
			
			// 临时帐号注册
			register(){
				$http.request({
					url:'users/register'
				}).then( res => {
					res.data.user_data = JSON.parse(res.data.user_data);
					this.userStore.user = res.data;
					this.userStore.persistData.token = res.data.token;
					
					this.userStore.is_login = true;
				}).catch( () => {
					uni.showToast({
						title:'注册失败',
						icon:'none'
					})
				});			
			},
			
			// 登陆
			login(){
				// 如果没有TOKEN就发起注册流程，否则用TOKEN登陆
				let token = this.userStore.persistData.token;
				if(token.length === 0){
					this.register();
				} else{
					$http.request({
						url:'users/login_token',
						token:true
					}).then( res => {
						res.data.user_data = JSON.parse(res.data.user_data);
						this.userStore.user = res.data;
						this.userStore.persistData.token = this.userStore.user.token;
						
						this.userStore.is_login = true;
					}).catch( () => {
						uni.showToast({
							title:'登陆失败',
							icon:'none'
						})
					});	
					
				}
			},
			//检查版本更新情况
			checkVersion() {
				// 获取本地版本信息
				plus.runtime.getProperty( plus.runtime.appid, wgtinfo => {
					let localVer={};
					localVer.appName = wgtinfo.name;
					localVer.version = wgtinfo.version;
					localVer.versionCode = wgtinfo.versionCode;
					this.mixedStore.setLocalVer(localVer);
					
					// 暂时屏蔽更新。
					// return;
					// 请求后台版本数据 
					$http.request({
						url:'index/get_upgrade'
					}).then( res => {
						let uptData = JSON.parse(res.data);
						this.mixedStore.setUptData(uptData);
						
						let newVersion = uptData.appVersion; //线上最新版本名
						let newVersionCode = uptData.appVersionCode; //线上最新版本号
						
						const selfVersion = this.mixedStore.localVer.version; // 当前版本号
						const selfVersionCode = this.mixedStore.localVer.versionCode; //当前App版本号
						
						let selfVerArr = selfVersion.split('.'); 
						let newVerArr = newVersion.split('.');  
						//线上版本号高于当前，进行在线升级
						if (selfVerArr[0] != newVerArr[0] || selfVerArr[1] != newVerArr[1] || selfVersionCode < newVersionCode) {
							let platform = uni.getSystemInfoSync().platform //手机平台
							//安卓手机弹窗升级
							if (platform === 'android') {
								uni.navigateTo({
									url: './upgrade'
								});
							}
							//IOS无法在线升级提示到商店下载
							else {
								uni.showModal({
									title: '发现新版本 ' + newVersionName,
									content: '请到App store进行升级',
									showCancel: false
								})
							}
						}					
					}).catch( (e) => {
						console.log('获取更新配置异常:', e);
					});					
				} );				
			}
		},

		
		onLoad(){
			this.checkVersion();
			this.getConfig();
			this.getCategaryList();
			this.getCommodityList();
			this.getBrdList();
			if(!this.userStore.is_login){
				this.login();
			}
		},
		
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(280);
					
		
				}
			})
			
		},
	}
</script>

<style scoped>
	.container {
		color: #2a1461;
		width: 100vw;
		height: 100vh;
	}
	.title{
		width: 100%;
		/* height: 168rpx; */
		padding: 52rpx 16rpx 18rpx;
		background-color: #F5F7FF;
		display: flex;
	}
	.title-item-img{
		flex: 20;
		height: 80rpx;
	}
	.title-item-search{
		flex: 55;
		height: 80rpx;
	}
	.title-item-crystal{
		flex: 25;
		height: 80rpx;
	}
	.title-img-box{
		width:126rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.title-img{
		width: 120rpx;
		height: 75rpx;
	}
	.search-bar{
		width: 95%;
		height: 100%;
		text-align: center;
		background-color: #E7DEF0;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
	}
	.search-icon{
		font-size: 22px;
		color: white;
		padding-left: 20rpx;
	}
	.search-placeholer{
		color: #FFFFFF;
		font-size: 28rpx;
		padding-left: 15rpx;
	}
	.crystal-box{
		width: 100%;
		height: 100%;
		margin-left: 0%;
		background-color: #E7DEF0;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
	}
	.crystal-bg{
		width: 60rpx;
		height: 60rpx;
		background-color: white;
		border-radius: 50%;
		margin-left: 8rpx;
		margin-right: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.crystal-img{
		width:80%;
		height: 80%;
	}
	.crystal-num{
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.cate-scroll{
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		background-color: #F5F7FF;
	}
	.cate-scroll-item{
		display: inline-block;
		font-size: 36rpx;
		padding: 10rpx 30rpx;
		line-height: 100%;
	}
	.cate-item-active{
		font-size: 38rpx;
		font-weight: bold;
	}
	.broadcoast{
		width: 100%;
		height: 50rpx;
 		background-image: url('../../static/img/fuli/pmd_bg.png');
		background-size: 100% 100%; 
	}
	.broadcoast-text{
		position: relative;
		top:-12rpx;
	}
	
	.list-head{
		width: 100%;
		padding: 0rpx 16rpx;
		height: 76rpx; 
		background-color: #F5F7FF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list-head-left{
		width: 300rpx;
		height: 44rpx;
		background: linear-gradient(to right, #FED58E 0%, #F7F3EB 30%,  #F5F7FF 100%);
		display: flex;
		align-items: center;
	}
	.list-head-left-name{
		font-size: 24rpx;
		font-weight: bold;
		padding: 0rpx 20rpx;
	}
	.list-head-left-englishname{
		font-size: 16rpx;
		font-style: italic;
		font-weight: bold;
	}
	.list-head-right{
		font-size: 24rpx;
		color: #6E7078;
		display: flex;
		align-items: center;
	}
	
	.list-head-right-text{
		padding-left: 15rpx;
	}
	
</style>
